<template>
    <van-popup class="modal-transparent" v-model:show="show" :close-on-click-overlay="false" teleport="body">
        <div class="modal-close">
            <div class="icon" @click="close"></div>
        </div>
        <div class="modal-container">
            <div class="header">
                <div class="icon"></div>
            </div>
            <div class="main">
                <div class="text">{{$t(text)}}</div>
            </div>
            <div class="footer">
                <div class="button" @click="submit">{{$t(buttonText)}}</div>
            </div>
        </div>
    </van-popup>
</template>
<script>
import { useRouter} from 'vue-router'
export default {
    props:{
        show:{},
        text:{
            default:'Sorry, the inventory is full today,please come back tomorrow,or use other payment methods'
        },
        buttonText:{
            default:'Try another'
        },
        type:{
            default:1
        }
    },
    setup(props,ctx) {
        const router = useRouter()
        const submit = ()=> {
            if(props.type === 1){
                router.push({name:'withdraw',params:{from:'modal'}})
                window.trackEvent({pageTitle:'withdrawpage',ev:'clickSwitchingPop'})
                ctx.emit('update:show',false)
                return
            }
            ctx.emit('submit')
        }
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        return {
            submit,
            close
        }
    }
}
</script>
<style lang="less" scoped>
.modal{
    &-container{
        background-color: white;
        border-radius: .16rem;
        padding: .46rem .16rem .28rem;
        font-size: .16rem;
        width: 3.11rem;
        &>.header{
            .fc();
            .icon{
                height:.64rem;
                width: .64rem;
                background: url(../../../assets/images/icon_cry.png) no-repeat center;
                background-size: contain;
            }
        }
        &>.main{
            margin-top: .24rem;
            .text{
                color: #242433;
                line-height: .24rem;
                text-align: center;
                font-weight: bold;
            }
        }
        &>.footer{
            margin-top: .24rem;
            .fc();
            .button{
                .unique-button();
                width:2.64rem;
                height:.48rem;
                color: white;
                box-shadow: none;
            }
        }
    }
    &-close{
        display: flex;
        justify-content:flex-end;
        .icon{
            margin-bottom:.16rem;
            height: .36rem;
            width: .36rem;
            background: url(../../../assets/images/Modal/modal_close_white.svg) no-repeat center;
            background-size: contain;
        }
    }
}
</style>